<script setup>
import { reactive, ref } from 'vue';
import { getImage } from '@/utils/global'
import ssjsOption from './ssjs'
import qxjyOption from './qxjy'
import hdsqOption from './hdsq'
import btnTabs from '@/components/Tabs.vue'


const sxjsData = [
  {
    label: '白石港',
    value: 0.23
  },
  {
    label: '株洲',

    value: 0.35
  },
  {
    label: '庙泉垅',
    value: 0.78
  }
]


const btnList = ['8小时', '24小时', '72小时', '7天']
const tabValue = ref(btnList[0])
const qxjyData = [
  {
    label: '12:00',
    value: 0.23
  },
  {
    label: '13:00', value: 0.35
  },
  {
    label: '14:00', value: 0.78
  },
  { label: '15:00', value: 0.23 },
  { label: '16:00', value: 0.35 },
  { label: '17:00', value: 0.78 },
  { label: '18:00', value: 0.23 },
  { label: '19:00', value: 0.35 },
]

const hdsqData = [
  {
    label: '潼塘',
    sssw: 93.26,
    jjsw: 96.5,
    bzsw: 98.4,
  },
  {
    label: '白石港 ',
    sssw: 33.96,
    jjsw: 40,
    bzsw: 41.5,
  },
  {
    label: '株洲',
    sssw: 32.63,
    jjsw: 40,
    bzsw: 43,
  },
  {
    label: '渌口',
    sssw: 30.98,
    jjsw: 39,
    bzsw: 42,
  },
  {
    label: '大石围',
    sssw: 30.91,
    jjsw: 39,
    bzsw: 42,
  },
  {
    label: '石亭',
    sssw: 42.11,
    jjsw: 51.5,
    bzsw: 52.5,
  },
]

const chartData = reactive({
  ssjsChartData: ssjsOption(sxjsData),
  qxjyChartData: qxjyOption(qxjyData),
  hdsqChartData: hdsqOption(hdsqData),
})



</script>

<template>
  <div class="global-header-title">
    <img :src="getImage('home/waijiedata_icon.png')" alt="" />
    <span>实现降水</span>
  </div>
  <div class="sxjs-div">
    <echarts-vue :chartData="chartData.ssjsChartData" />
  </div>

  <div class="global-header-title">
    <img :src="getImage('home/waijiedata_icon.png')" alt="" />
    <span>气象降雨预报</span>
  </div>
  <div class="qxjy-div">
    <btnTabs v-model="tabValue" :tabs="btnList" />
    <div class="qxjy-chart">
      <echarts-vue :chartData="chartData.qxjyChartData" />
    </div>
  </div>
  <div class="global-header-title">
    <img :src="getImage('home/zhuangtai_icon.png')" alt="" />
    <span>河道水情</span>
  </div>
  <div class="hdsq-div">
    <echarts-vue :chartData="chartData.hdsqChartData" />
  </div>
</template>

<style lang="less" scoped>
.sxjs-div {
  height: calc(35% - 40px);
}
.qxjy-div {
  height: calc(30% - 40px);
  .qxjy-chart {
    height: calc(100% - 40px);
  }
}
.hdsq-div {
  height: calc(35% - 40px);
}
</style>